<template>
    <div style="text-align:left;">
        <el-tag size="small" class="remark" @click="$data.dlg_show = true"><WarningFilled style="width: 14px;"/> 说明</el-tag>
        <el-dialog :title="$props.title" v-model="$data.dlg_show" align-center>
            <slot></slot>

            <div style="text-align: center;margin-top: 20px;">
                <el-button type="primary" @click="$data.dlg_show=false;">关闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<style scoped lang="scss">
::v-deep(.dlg), ::v-deep(.dlg) > div {
    min-width: 300px;
    max-width: 600px;
}

.remark {
    margin:2px;
    padding:4px;
}
.remark  ::v-deep(.el-tag__content) {
    display: flex;
    align-items: center;
}
</style>
<script setup>

import {Setting, CirclePlus, Remove, CaretBottom, CaretTop,WarningFilled} from '@element-plus/icons-vue'

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs()

// 定义选项
defineOptions({
    name: "remark",
    inheritAttrs: false,
});


//定义属性
const $props = defineProps({
    title: {type: String, default: "说明"}
});

//定义data
const $data = reactive({
    dlg_show: false
})

</script>